import React, { Component } from 'react';
import {HashRouter  as Router, Route, withRouter} from "react-router-dom";

import HomeHeader from "../app/homepage/HomeHeader";
import HomeFooter from "../app/homepage/HomeFooter";
import Home from "../app/homepage/Home";
import Inquiry from '../components/fun/Inquiry';
import ExCarousel from '../components/example/ExCarousel';
import '../app/homepage/style/homecontent.less';
import Phonograph from "../app/phonograph";
import RecList from "../app/phonograph/RecList";
import TableList from '../components/table/TableList';
import TableFieldList from '../components/table/TableFieldList';

// eslint-disable-next-line no-unused-vars
// const hei = document.documentElement.clientHeight;
class App extends Component{
    constructor(props){
        super(props);
        this.state = {
            height:`${document.documentElement.clientHeight}px`,
            contentHeight:`${document.documentElement.clientHeight-160}px`,
            loading:true
        };
    }

    componentDidMount(){
        window.addEventListener('resize',this.handleHeigt.bind(this))
    }

    componentWillUnmount(){
        window.removeEventListener('resize',this.handleHeigt.bind(this))
    }

    handleHeigt = ()=>{
        console.log("浏览器窗口大小改变");

        const screenHeight = document.documentElement.clientHeight;
        let height = `${screenHeight}px`;
        let contentHeight = `${screenHeight-160}px`
        if(screenHeight<160){
            height='auto';
            contentHeight = 'auto';
        }
        this.setState({
            height,contentHeight
        })
    }

    render(){
        if("OK"!==sessionStorage.getItem("loginStatus")){
            window.location.href="/";
            return
        }
        return(
            <div className={"home-outest"}>
                <Router>
                    <div style={{overflow:'auto',minHeight:this.state.height,height:'auto'}}>
                        <HomeHeader />
                            {/* 此处minheight 减去的160 源于 homeheader及homefooter 各自为80px高度 此处保证界面刚好占满整个浏览器页面 */}
                            <div className = "home-content"
                                style={{height:this.state.contentHeight ,
                                 marginTop:"10px",
                                 marginBottom:"10px"}
                                }>
                                <Route path="/home" component={Home}/>
                                <Route path="/phonograph" component={Phonograph}/>
                                <Route path="/recList" component={RecList}/>
                                <Route path="/tableList" component={TableList}/>
                                <Route path="/carousel" component={ExCarousel}/>
                                <Route path="/tableFieldList" component={TableFieldList}/>
                                <Route path="/Inquiry" component={Inquiry}/>
                            </div>
                        <HomeFooter />
                    </div>
                </Router>
            </div>
        )
    }
}
export default withRouter(App);

